<template>
  <elestatement
    v-loading="loading"
    :element-loading-text="loadingText"
    element-loading-spinner="el-icon-warning-outline"
    element-loading-background="rgba(0, 0, 0, 0.5)"
    :pop='pop' >
    <slot slot="close"></slot>
    <div class="ranking realblock"  slot="content">
      <div class="eleblock realRank">
        <StoreEnterRateList   :item_list="item_list"></StoreEnterRateList>
      </div>
    </div>
  </elestatement>
</template>
<style lang="scss">
  .zujiandiv{
    .ranking{
      width: 100%;
      height: 85%;
      overflow: hidden;
      .realRank{
        width:100%;
        height: 100%;
      }
    }
  }

</style>
<script>
  let moment = require("moment");
  import elestatement from "@/components/real-time/real-time-module/common/size/Element2x2";
  import StoreEnterRateList from "@/components/analyzeRealTime/storeEnterRateList";//轮播滚动
  export default {
    components: {
      elestatement,
      StoreEnterRateList
    },
    props:{
      GetData:{},
      isdemo:{
        type:Boolean,
        default:function(){
          return false
        }
      }
    },
    data(){
      return {
        item_list: [],
        pop: {
          title: "入店率列表",							//报表标题
          helphint: [
            {title: "入店率", text: ""},				//第一条信息为提示标题 不给text
            {title: "入店率", text: "：(客流总数 / 经过人数)*100"},
          ]
        },
        realData: {
          company_ids: '',//企业id
          case_ids: '',//案场id
          idsType: 0,//企业或案场标记：0：为只选择了企业id，1：为选择了案场id
          start_day: moment(new Date()).format("YYYY-MM-DD"),
          end_day: moment(new Date()).format("YYYY-MM-DD"),
        },
        loading:false,
        loadingText:'加载中...',
        start_hm:'00:00',
        end_hm:'23:59',
        global:null,
        xykpis:['enters','enters_rate'],
        shake:false
      }
    },
    created() {
      if(this.isdemo) {
        this.$nextTick(()=>{
          this.item_list=[
            {
              case_info_name: "云视北京店",
              enters: 88888,
              enters_rate:'88.88%'
            },
            {
              case_info_name: "云视上海店",
              enters: 78888,
              enters_rate:'88.88%'
            },
            {
              case_info_name: "云视广州店",
              enters: 68888,
              enters_rate:'88.88%'
            },
            {
              case_info_name: "云视深圳店",
              enters: 58888,
              enters_rate:'88.88%'
            },
            {
              case_info_name: "云视安徽店",
              enters: 48888,
              enters_rate:'88.88%'
            },
            {
              case_info_name: "云视杭州店",
              enters: 46666,
              enters_rate:'88.88%'
            },
            {
              case_info_name: "云视香港店",
              enters: 38888,
              enters_rate:'88.88%'
            },
            {
              case_info_name: "云视云南店",
              enters: 28888,
              enters_rate:'88.88%'
            }
          ];
        })
        this.loading=false;
      }
    },
    mounted() {

    },
    beforeDestroy(){
    },
    methods: {
      getData() {
        let tags=0;
        if(this.global.type=='chain')
        {
          tags=2;
        }
        else if(this.global.type=='mall')
        {
          tags=1;
        }
        let org_id_list = []
        if(this.realData.idsType == 1){
          org_id_list = this.realData.case_ids.split(',')
        }else{
          org_id_list = this.realData.allCase_ids
        }
        let url = '/sys/report_new/distribution_sum?group_type=case&tags='+ tags+
          '&indicator_keys=' + this.xykpis +'&sort_key=enters&sort_type=desc'+
          "&start_day=" + this.realData.start_day + "&end_day=" + this.realData.end_day + "&start_hm=" + this.start_hm + "&end_hm=" + this.end_hm;
        let prarms = {
          org_id_list: org_id_list,
          org_type:2,
        }
        console.log(prarms,'prarms');
        this.$api.post(url, prarms)
        .then(data => {
          if(data == '10001'){
            this.item_list=[];
            this.loadingText = '无该指标权限';
            this.shake = false
            return
          }
          if(data && data.data.item_list&&data.data.item_list.length){
            let _data = data.data;
            _data.item_list.sort((x, y) => {
              if (x.enters_rate < y.enters_rate) {
                return 1;
              }
              if (x.enters_rate > y.enters_rate) {
                return -1
              }
              return 0
            });
            this.item_list = _data.item_list.map(x => {
              if (x.enters_rate||x.enters_rate==0) {
                x.enters_rate = x.enters_rate + '%'
              }
              return x
            });
            this.$nextTick(()=>{
              this.loading = false;
            })
          }
          else{
            this.item_list=[];
            this.$nextTick(()=>{
              this.loadingText = '无数据';
            })
          }
          this.shake = false
        })
        .catch(err=>{
          this.item_list=[];
          this.shake = false
          this.$nextTick(()=>{
            this.loadingText = '无数据';
          })
           console.log(err);
        })
      },


    },
    watch: {
      GetData:{
        handler(val){
          console.log(val);
          if(this.shake && val.index != 0){
            return
          }
          if(val){
            this.realData = val.realHeaderData;
            console.log(this.realData,'this.realData');
            this.global = val.global;
            this.loading = true;
            this.shake = true
            this.$nextTick(()=>{
              if(this.realData.case_ids){
                this.realData.case_ids
              }
              if(!this.realData.company_ids.length){
                this.item_list=[];
                this.loadingText = '无数据';
                this.shake = false
                return
              }else{
                this.loadingText = '加载中...';
                this.getData();
              }
            })

          }
        },
        deep:true
      }
    }
  };
</script>
